{% include 'header.html' %}
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<style>
    .draggable {
        cursor: move;
        user-select: none;
    }

    .dropzone {
        min-height: 200px;
        border: 2px dashed #ccc;
        padding: 10px;
    }
</style>
    <h1 class="text-2xl font-bold mb-4">查看和修改策略</h1>
    <div class="flex space-x-4">
        <div class="w-1/3 bg-white p-4 rounded shadow dropzone" id="component-list">
            <h2 class="text-lg font-bold mb-2">策略组件列表</h2>
            <div class="draggable bg-blue-100 p-2 mb-2 rounded" draggable="true">买入信号：均线金叉</div>
            <div class="draggable bg-blue-100 p-2 mb-2 rounded" draggable="true">卖出信号：均线死叉</div>
            <div class="draggable bg-blue-100 p-2 mb-2 rounded" draggable="true">止损条件：亏损 5%</div>
            <div class="draggable bg-blue-100 p-2 mb-2 rounded" draggable="true">止盈条件：盈利 10%</div>
        </div>
        {% for strategy in strategies %}
        <div class="w-2/3 bg-white p-4 rounded shadow dropzone" id="strategy-dropzone-{{ strategy.id }}">
            <h2 class="text-lg font-bold mb-2">策略 ID: {{ strategy.id }}</h2>
            {% for component in strategy.components.split(',') %}
            <div class="bg-yellow-100 p-2 mb-2 rounded draggable" draggable="true">
                {{ component }}
                <span class="delete-btn" onclick="deleteComponent(this, {{ strategy.id }})"><i class="fa-solid fa-trash"></i></span>
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
    <button id="save-changes" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
        保存修改
    </button>
    <script>
        const draggables = document.querySelectorAll('.draggable');
        const dropzones = document.querySelectorAll('.dropzone');
        const saveButton = document.getElementById('save-changes');

        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', () => {
                draggable.classList.add('dragging');
            });

            draggable.addEventListener('dragend', () => {
                draggable.classList.remove('dragging');
            });
        });

        dropzones.forEach(dropzone => {
            dropzone.addEventListener('dragover', e => {
                e.preventDefault();
                dropzone.classList.add('bg-gray-200');
            });

            dropzone.addEventListener('dragleave', () => {
                dropzone.classList.remove('bg-gray-200');
            });

            dropzone.addEventListener('drop', e => {
                e.preventDefault();
                dropzone.classList.remove('bg-gray-200');
                const draggingElement = document.querySelector('.dragging');
                if (draggingElement) {
                    const newElement = draggingElement.cloneNode(true);
                    dropzone.appendChild(newElement);
                }
                /**
                if (draggingElement.parentNode.id === 'component-list') {
                    // 如果是从左边组件列表拖拽，复制元素
                    const newElement = draggingElement.cloneNode(true);
                    dropzone.appendChild(newElement);
                } else {
                    // 如果是从右边策略区域拖拽，移动元素
                    if (draggingElement.parentNode) {
                        draggingElement.parentNode.removeChild(draggingElement);
                    }
                    dropzone.appendChild(draggingElement);
                }*/
            });
        });

        function deleteComponent(btn, strategyId) {
            const componentDiv = btn.parentNode;
            componentDiv.parentNode.removeChild(componentDiv);
        }

        saveButton.addEventListener('click', () => {
            const updatedStrategies = [];
            const componentList = document.getElementById('component-list');
            const componentListComponents = Array.from(componentList.children).filter(child => child.classList.contains('draggable')).map(child => child.textContent);

            dropzones.forEach((dropzone, index) => {
                if (dropzone.id!== 'component-list') {
                    const strategyId = dropzone.id.split('-').pop();
                    const strategyComponents = Array.from(dropzone.children).filter(child => child.classList.contains('draggable')).map(child => child.textContent);
                    updatedStrategies.push({ id: strategyId, components: strategyComponents });
                }
            });

            fetch('/strategy/update-strategies', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ strategies: updatedStrategies, componentList: componentListComponents })
            })
           .then(response => response.json())
           .then(data => {
                alert(data.message);
            });
        });
    </script>
{% include 'footer.html' %}